<template>
  <div class="flex flex-wrap items-end gap-4">
    <BaseIconBox size="md" shape="straight" flavor="solid" color="primary" mask="hex">
      <Icon name="ph:armchair-duotone" class="h-6 w-6" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="straight" flavor="solid" color="info" mask="hexed">
      <Icon name="ph:confetti-duotone" class="h-6 w-6" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="straight" flavor="solid" color="success" mask="deca">
      <Icon name="ph:check-circle-duotone" class="h-6 w-6" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="straight" flavor="solid" color="warning" mask="blob">
      <Icon name="ph:lightbulb-duotone" class="h-6 w-6" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="straight" flavor="solid" color="danger" mask="diamond">
      <Icon name="ph:cookie-duotone" class="h-6 w-6" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="straight" flavor="pastel" color="primary" mask="hex">
      <Icon name="ph:armchair-duotone" class="h-6 w-6" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="straight" flavor="pastel" color="info" mask="hexed">
      <Icon name="ph:confetti-duotone" class="h-6 w-6" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="straight" flavor="pastel" color="success" mask="deca">
      <Icon name="ph:check-circle-duotone" class="h-6 w-6" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="straight" flavor="pastel" color="warning" mask="blob">
      <Icon name="ph:lightbulb-duotone" class="h-6 w-6" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="straight" flavor="pastel" color="danger" mask="diamond">
      <Icon name="ph:cookie-duotone" class="h-6 w-6" />
    </BaseIconBox>
  </div>
</template>
